@import "_variables";
@import "_mixins";

.content {
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;

	.header-copied {
		font-size: 16px;
		opacity: 1;
		transition: 1s ease-out;
		margin-left: 5px;
	}

	figure {
		img, video {
			max-width: 100%;
			display: block;
			margin: 0 auto;
		}

		figcaption {
			text-align: center;
			font-style: italic;
			margin-top: $unit;
		}
	}


	p, ul, ol, pre, h4, h5 {
		margin-top: 1em;
		margin-bottom: 1.5em;
	}

	pre[class*=language-] {
		@include mobile-only() {
			border-radius: 0 !important;
			margin-left: -20px;
			margin-right: -20px;
		}
	}

	p.parent-back {
		margin: 0;
		margin-top: 10px;
		font-size: 18px;
		font-weight: bold;

		.symbol {
			font-weight: bold;
		}

		a {
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}

		+ h1 {
			margin-top: 10px;
		}
	}

	strong {
		font-weight: bold;
	}

	em {
		font-style: italic;
	}

	ul, ol {
		margin-left: 16px;

		li {
			margin: 8px 0;

			p {
				margin: 0;
			}
		}

		ul, ol {
			margin-top: 10px;
			margin-bottom: 10px;
		}
	}

	ol li {
		list-style: decimal;
	}

	ul li {
		list-style: disc;
	}

	h1, h2, h3, h4, h5 {
		outline: none;

		&:hover a[href^="#"],
		&:focus a[href^="#"] {
			display: inline;
		}

		a[href^="#"] {
			display: none;
			text-decoration: none;
			color: $color-4;
			margin-left: 5px;

			&:hover {
				text-decoration: underline;
			}

			&:focus {
				display: inline;
			}

			&::before {
				content: "#";
			}
		}

		@include mobile-only() {
			line-height: 1.2em;
		}
	}

	pre {
		border-radius: $unit-border-radius;
	}

	hr {
		border: none;
		border-bottom: 1px solid var(--hard-border-color);
		margin: $unit 0;
	}

	h1, h2, h3 {
		padding: $unit 0;
		margin-top: $unit;
	}

	h1 {
		margin: .67em 0;

		&:first-child {
			margin-top: 0;
		}
	}

	h2 {
		margin: 0.83em 0;
		font-size: 1.75em;
	}

	h3 {
		margin: 1em 0;
		font-size: 1.5em;
	}

	h4 {
		font-size: 1.25em;
		margin-bottom: 0;
	}

	h5 {
		font-size: 1.1em;
		margin-bottom: 0;
	}

	h2,
	h3,
	h4,
	h5 {
		padding: calc($unit / 4) 0;
	}

	table {
		border-collapse: collapse;
		width: 100%;
	}

	thead th {
		text-align: left;
		padding: calc($unit / 2);
		font-weight: bold;
	}

	tbody td {
		padding: calc($unit / 2);
		border: 1px solid var(--soft-border-color);
	}

	tbody tr:nth-child(even) {
		background-color: var(--table-even-row-color);
	}

	blockquote {
		border-left: $unit * 0.5 solid var(--blockquote-color);
		margin: $unit 0 $unit * 1.5 0;
		padding: $unit;

		> p:first-child {
			margin-top: 0;
		}

		> p:last-child {
			margin-bottom: 0;
		}

		> section:first-child > :first-child {
			margin-top: 0;
			padding-top: 0;
		}

		> section:last-child > :last-child {
			margin-bottom: 0;
			padding-bottom: 0;
		}
	}
}
